<template>
	<div>
		<el-dialog
			title="修改角色"
			:visible.sync="editRoleVisible"
			width="50%"
			:before-close="handleClose"
			@close="editDialdgClose"
		>
			<!-- 内容区域 -->
			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
				<el-form-item label="编号" prop="RoleCode">
					<el-input v-model="editForm.RoleCode"></el-input>
				</el-form-item>
				<el-form-item label="角色名称" prop="RoleName">
					<el-input v-model="editForm.RoleName"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="Remark">
					<el-input v-model="editForm.Remark"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editRoleVisible = false">取 消</el-button>
				<el-button type="primary" @click="editRole">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		editRoleVisible: {
			type: Boolean,
			default: false
        },
        roleid:{
            type:parseInt,
            default:0
        }
	},
	data() {
		return {
			editForm: {
				Id: 0,
				RoleCode: '',
				RoleName: '',
				Remark: ''
			},
			//添加表单数据验证
			editFormRules: {
				RoleCode: [
					{ required: true, message: '请输入编号', trigger: 'blur' },
					{
						min: 3,
						max: 11,
						message: '长度在3到11个字符之间',
						trigger: 'blur'
					}
				],
				RoleName: [
					{
						required: true,
						message: '请输入角色名称',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done()
				})
				.catch(_ => {})
		},
		//初始化弹框
		editDialdgClose() {
			this.$refs.editFormRef.resetFields()
		},
		//添加角色
		editRole() {
			console.log('修改角色')

			this.$refs.editFormRef.validate(valid => {
				if (!valid) {
					return
				}
				console.log(this.editForm)
				this.$get('/api/Role/EditRole', this.editForm)
					.then(res => {
						if (res.code == 0) {
							this.$alert(res.msg, '提示')
							this.editRoleVisible = false
							this.$emit('refreshData')
						} else {
							this.$alert(res.msg, '提示')
						}
					})
					.catch(err => {
						console.log(err)
					})
			})
		}
	},
	watch: {
		editRoleVisible: function(val) {
			this.$emit('IsShowEdit', val)
			if (val == true) {
                this.$get('/api/Role/GetRole',{ID:this.roleid}).then(res=>{
                    if(res.code==0){
                        console.log(res.data);
                        this.editForm.Id=res.data.id,
                        this.editForm.RoleName=res.data.roleName;
                        this.editForm.RoleCode=res.data.roleCode;
                        this.editForm.Remark=res.data.remark;
                        console.log(res.data);
                    }else{
                        this.$message.errer(res.msg)
                    }
                }).catch(err=>{
                    console.log(err)
                })
			}
		}
	}
}
</script>